<template>
    <div class="editor-container">
        <!-- <page-main title="富文本编辑器">
            <el-row>
                <el-col :span="24">标题:</el-col>
                <el-col>
                    <el-input v-model="title" placeholder="请输入内容" />
                </el-col>
            </el-row>

            <editor v-model="form.content" />
            <div class="preview" v-html="form.content" />
        </page-main> -->
        <page-main title="博客编辑器">
            <el-row>
                <el-col :span="24" class="title-text">主标题:</el-col>
                <el-col>
                    <el-input
                        v-model="title"
                        class="title-input"
                        placeholder="请输入标题内容"
                    />
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="title-text">副标题:</el-col>
                <el-col>
                    <el-input
                        v-model="minorContent"
                        class="title-input"
                        placeholder="请输入副标题内容"
                    />
                </el-col>
            </el-row>
            <el-row class="upload-img">
                <el-col :span="24" class="title-text">文章右侧图:</el-col>
                <el-col>
                    <el-upload
                        class="avatar-uploader"
                        :action="action"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img
                            v-if="imageUrl"
                            :src="imgPath ? baseURL + imgPath : imageUrl"
                            class="avatar"
                        >
                        <i v-else class="el-icon-plus avatar-uploader-icon" />
                    </el-upload>
                </el-col>
            </el-row>

            <mavon-editor v-model="content" style="z-index: 9;" />
            <!-- <div class="preview" v-html="mdContent" /> -->
        </page-main>
        <fixed-action-bar>
            <el-button type="primary" @click="saveEditor">保存博客</el-button>
            <el-button type="primary" @click="clearEditor">清空内容</el-button>
        </fixed-action-bar>
    </div>
</template>

<script>
import {
    action,
    baseURL,
    addBlog,
    upLoadImg,
    getBlogById,
    updateBlog
} from '@/api/myIndex'
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default {
    name: 'ComponentExampleEditor',
    components: {
        mavonEditor
    },
    data() {
        return {
            content: '# Fantastic-admin',
            title: '',
            minorContent: '',
            imageUrl: '',
            imgPath: '',
            mainContent: '',
            // 默认不是更新，true代表更新
            isUpdate: false,

            action,
            baseURL
        }
    },
    computed: {
        mdContent() {
            const mdit = mavonEditor.getMarkdownIt()
            // mk文件的内容，html格式的字符串
            console.log(mdit.render(this.content))
            return mdit.render(this.content)
        }
    },
    created() {
        // 通过修改按钮跳转过来的
        let id = this.$route.params?.id
        if (id != ':id') {
            // 标识为更新
            this.isUpdate = true
            this.updateBlogConten(id)
        }
    },
    methods: {
        // 清除已编写的博客内容
        clearEditor() {
            this.$confirm('此操作将清空已编写的内容', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.alterFn('清除成功')
            })
        },
        // 保存博客
        async saveEditor() {
            let title = this.title
            let minorContent = this.minorContent
            let imgPath = this.imgPath
            // 编辑器内容
            let mdContent = this.mdContent
            // 是更新操作
            let result
            if (this.isUpdate) {
                result = await updateBlog(
                    this.$route.params?.id,
                    title,
                    mdContent,
                    new Date().toLocaleDateString(),
                    minorContent,
                    imgPath
                )
            } else {
                // 新增操作
                result = await addBlog(title, mdContent, minorContent, imgPath)
            }
            if (result.code === 200) {
                this.alterFn('保存成功')
                this.isUpdate = false
                return
            }
            this.$message.error(result.message)
        },
        // 获取指定博客的内容
        async updateBlogConten(id) {
            let result = await getBlogById(id)
            if (result.code === 200) {
                this.title = result.data.title
                this.minorContent = result.data.minorContent
                this.imgPath = result.data.img
                this.imageUrl = result.data.img
                this.content = result.data.mainContent
                return
            }
            this.$message.error(result.message)
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw)
        },
        // upload组件上传图片之前的回调，将图片保存到服务器并返回其路径
        async beforeAvatarUpload(file) {
            let fd = new FormData()
            fd.append('file', file)
            let result = await upLoadImg(fd)
            if (result.code === 200) {
                this.imgPath = result.data
                console.log(this.imgPath)
                return true
            }
            this.$message.error(result.message)
            return false
        },
        // 保存后/清除后，提示
        alterFn(message) {
            this.$message({
                type: 'success',
                message
            })
            this.title = ''
            this.minorContent = ''
            this.content = ''
            this.imgPath = ''
            this.imageUrl = ''
        }
    }
}
</script>

<style lang="scss" scoped>
.editor-container ::v-deep .actionbar {
    z-index: 99;
}
.preview {
    margin-top: 10px;
    &::before {
        content: "预览：";
        display: block;
    }
}
.title-text {
    font-size: 20px;
    font-weight: 600;
}
.title-input {
    margin: 20px 0;
}
// .upload-img ::v-deep .el-upload {
//     margin: 20px 0;
// }
.avatar-uploader ::v-deep .el-upload {
    margin: 20px 0;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
